<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn @increasement = "showtotal" @decreasement = "showtotal"></cpn>
  <h2>您的最后得分是：{{total}}</h2>
</div>


<template id="cpn">
  <div>
    <button @click="increase">+</button>
    <button @click="decrease">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  const cpn ={
      template:'#cpn',
      data(){
          return{
              counter:0,
          }
      },
      methods:{
          increase(){
              this.counter++;
              this.$emit("increasement",this.counter)
          },
          decrease(){
              this.counter--;
              this.$emit("decreasement",this.counter)
          },
      }
  }



    const app = new Vue({
        el:'#app',
        data:{
            message:'你好呀',
            total:0,
        },
        components:{
            cpn,
        },
        methods:{
            showtotal(counter){
                this.total = counter;
            }
        }
    })
</script>

</body>
</html>